<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/src/css/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
  <title>div</title>
</head>

<body>
  <main>
    <h1>div悬浮效果</h1>
    <div class="part">
      <h4>一、纯图片div</h4>
      <article>
        <h5>html代码：</h5>
        <pre><code class="language-html">
          &lt;div class="lists"&gt;
            &lt;a href="#" class="box"&gt;
                &lt;img src="avatar.jpg"&gt;
            &lt;/a&gt;
            &lt;a href="#" class="box"&gt;
                &lt;img src="avatar.jpg"&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        </code></pre>
        <h4>1. 缓动上移</h4>
        <h5>效果展示：</h5>
        <div class="div-show lists1">
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
        </div>
        <pre><code class="language-css">
        .lists{
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }
        .box{
            width: 200px;
            height: 200px;
            transition: all 0.3s;
        }
        .box~.box{
            margin-left: 15px;
        }
        .box img{width: 100%;height: 100%;}
        .box:hover{
            transform: translateY(-6px);
        }        
        </code></pre>

        <h4>2. 放大效果</h4>
        <h5>效果展示：</h5>
        <div class="div-show lists2">
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
        </div>
        <pre><code class="language-css">
        .lists{
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }
        .box{
            width: 200px;
            height: 200px;
            transition: all 0.3s;
        }
        .box~.box{
            margin-left: 15px;
        }
        .box img{width: 100%;height: 100%;}
        .box:hover{
            transform: scale(1.03);
        }
             
        </code></pre>

        <h4>3. 框内放大效果</h4>
        <h5>效果展示：</h5>
        <div class="div-show lists3">
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
        </div>
        <pre><code class="language-css">
        .lists{
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }
        .box{
            width: 200px;
            height: 200px;
            overflow:hidden;
        }
        .box~.box{
            margin-left: 15px;
        }
        .box img{
            width: 100%;
            height: 100%;
            transition: all 0.5s;
        }
        .box:hover img{
            transform: scale(1.1);
        }
             
        </code></pre>

        <h4>4. 蒙层效果</h4>
        <h5>效果展示：</h5>
        <div class="div-show lists4">
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
          <a href="" class="box">
            <img src="/src/images/dog.png" alt="#">
          </a>
        </div>
        <pre><code class="language-css">
        .lists{
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }
        .box{
            width: 200px;
            height: 200px;
            overflow:hidden;
            background-color: #4f4f4f;
        }
        .box~.box{
            margin-left: 15px;
        }
        .box img{
            width: 100%;
            height: 100%;
            transition: all 0.5s;
        }
        .box:hover img{
            opacity: 0.8
        }
        
             
        </code></pre>
      </article>
    </div>

    <div class="part">
      <h4>二、上图下文div</h4>
      <article>
        <h5>html代码：</h5>
        <pre><code class="language-html">
          &lt;div class="lists"&gt;
            &lt;a href="#" class="item"&gt;
                &lt;div class="item_pic"&gt;
                    &lt;img src="avatar.jpg"&gt;
                &lt;/div&gt;
                &lt;div class="item_content"&gt;
                    &lt;div class="title"&gt;我是标题&lt;/div&gt;
                    &lt;div class="content"&gt;这是内容&lt;/div&gt;
                &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        </code></pre>
        <h4>1. 框内放大 + 阴影</h4>
        <h5>效果展示：</h5>
        <div class="div-show lists5">
          <a href="#" class="item">
            <div class="item_pic">
              <img src="/src/images/dog.png">
            </div>
            <div class="item_content">
              <div class="title">我是标题</div>
              <div class="content">这是内容</div>
            </div>
          </a>
          <a href="#" class="item">
            <div class="item_pic">
              <img src="/src/images/dog.png">
            </div>
            <div class="item_content">
              <div class="title">我是标题</div>
              <div class="content">这是内容</div>
            </div>
          </a>
        </div>
        <pre><code class="language-css">
        .lists{
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }
        .item{
            width: 200px;
            color: #333;
            text-decoration: none;
            border: 1px solid #eee;
            transition: all 0.5s;
        }
        .item .item_pic{
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .item .item_pic img{
            width: 100%;
            height: 100%;
            transition: all 0.5s;
        }
        .item:hover .item_pic img{
            transform: scale(1.1);
        }
        .item:hover{
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
        }
        .item_content{
            padding: 20px 10px;
        }
        
             
        </code></pre>

        <h4>2. 缓动上移 + 阴影</h4>
        <h5>效果展示：</h5>
        <div class="div-show lists6">
          <a href="#" class="item">
            <div class="item_pic">
              <img src="/src/images/dog.png">
            </div>
            <div class="item_content">
              <div class="title">我是标题</div>
              <div class="content">这是内容</div>
            </div>
          </a>
          <a href="#" class="item">
            <div class="item_pic">
              <img src="/src/images/dog.png">
            </div>
            <div class="item_content">
              <div class="title">我是标题</div>
              <div class="content">这是内容</div>
            </div>
          </a>
        </div>
        <pre><code class="language-css">
        .lists{
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }
        .item{
            width: 200px;
            color: #333;
            text-decoration: none;
            border: 1px solid #eee;
            transition: all 0.5s;
            margin-right: 20px;
        }
        .item .item_pic{
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .item .item_pic img{
            width: 100%;
            height: 100%;
            transition: all 0.5s;
        }
        .item:hover{
            /*-1或者-2最佳*/
            transform: translateY(-1px);  
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
        }
        .item_content{
            padding: 20px 10px;
        }
        </code></pre>

        <h4>3. 蒙层效果 + 文字变色 + 边框</h4>
        <h5>效果展示：</h5>
        <div class="div-show lists7">
          <a href="#" class="item">
            <div class="item_pic">
              <img src="/src/images/dog.png">
            </div>
            <div class="item_content">
              <div class="title">我是标题</div>
              <div class="content">这是内容</div>
            </div>
          </a>
          <a href="#" class="item">
            <div class="item_pic">
              <img src="/src/images/dog.png">
            </div>
            <div class="item_content">
              <div class="title">我是标题</div>
              <div class="content">这是内容</div>
            </div>
          </a>
        </div>
        <pre><code class="language-css">
        .lists{
            display: flex;
            margin-top: 100px;
            justify-content: center;
        }
        .item{
            width: 200px;
            color: #333;
            text-decoration: none;
            border: 1px solid #eee;
            margin-right: 20px;
            transition: all 0.5s;
        }
        .item .item_pic{
            width: 200px;
            height: 200px;
            overflow: hidden;
            background-color: #4f4f4f;
        }
        .item .item_pic img{
            width: 100%;
            height: 100%;
            transition: all 0.5s;
        }
        .item:hover{
            border: 1px solid green;
        }
        .item:hover .item_pic img{
            opacity: 0.8;
        }
        .item:hover .item_content{
            color: green;
        }
        .item_content{
            padding: 20px 10px;
            transition: all 0.5s;
        }
        
        </code></pre>
      </article>
    </div>

    <div class="part">
      <h4>三、文字覆盖图片DIV</h4>
      <article>

        <h4>1. 蒙层效果 + 文字变色 + 边框</h4>
        <h5>html代码：</h5>
        <pre><code class="language-html">
          &lt;div class="lists"&gt;
            &lt;a href="#" class="item"&gt;
                &lt;div class="item_pic"&gt;
                    &lt;img src="avatar.jpg"&gt;
                &lt;/div&gt;
                &lt;div class="item_content"&gt;
                    &lt;div class="title"&gt;我是标题&lt;/div&gt;
                    &lt;div class="content"&gt;这是内容&lt;/div&gt;
                &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        </code></pre>
        <h5>效果展示：</h5>
        <div class="div-show lists8">
          <a class="box">
            <img src="/src/images/dog.png" alt="#" />
            <div class="box2">
              <h3>我是标题</h3>
              <p>我是内容</p>
            </div>
          </a>
          <a class="box">
            <img src="/src/images/dog.png" alt="#" />
            <div class="box2">
              <h3>我是标题</h3>
              <p>我是内容</p>
            </div>
          </a>
        </div>
        <pre><code class="language-css">
        .box {
            position:relative;
            z-index:1;
            display:inline-block;
            overflow:hidden;
            background:#3085a3;
            text-align:center;
            cursor:pointer
        }
        .box img {
            width:200px;
            height:200px;
            opacity:1;
            transition:opacity .35s,transform .35s;
            float:left;
        }
        .box:hover img {
            opacity:.5;
        }
        .box h3 {
            margin-top:20%;
            transition:transform .35s;
            transform:translate3d(0,20px,0);
            opacity:0;
            color:#fff;
            font-size:16px;
        }
        .box p {
            margin:10px 0 0;
            padding:15px;
            border:1px solid #fff;
            opacity:0;
            transition:opacity .35s,transform .35s;
            transform:translate3d(0,20px,0) scale(1.1);
            color:#FFF;
        }
        .box:hover h3 {
            transform:translate3d(0,0,0);
            opacity:1;
        }
        .box:hover p {
            opacity:1;
            transform:translate3d(0,0,0) scale(1);
        }
        .box2 {
            width:200px;
            height:200px;
            padding:15px;
            position:absolute;
            box-sizing: border-box;
        }	
        
        
        </code></pre>

        <h4>2. 文字滑动进入</h4>
        <h5>html代码：</h5>
        <pre><code class="language-html">
          &lt;div class="lists">
            &lt;div class="item">
                &lt;div class="text">
                  &lt;h1>标题名称&lt;/h1>
                  &lt;img src="avatar.jpg">
                  &lt;h2 class="animate-text">我是小标题&lt;/h2>
                  &lt;p class="animate-text">这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介&lt;/p>
                  &lt;div class="dots"> &lt;span>&lt;/span> &lt;span>&lt;/span> &lt;span>&lt;/span> &lt;/div>
                &lt;/div>
                &lt;/div>
          &lt;/div>
        
        </code></pre>
        <h5>效果展示：</h5>
        <div class="div-show lists9">
          <div class="item">
            <div class="text">
              <h1>标题名称</h1>
              <img src="/src/images/dog.png">
              <h2 class="animate-text">我是标题</h2>
              <p class="animate-text">这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介</p>
              <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
          </div>
          <div class="item">
            <div class="text">
              <h1>标题名称</h1>
              <img src="/src/images/dog.png">
              <h2 class="animate-text">我是标题</h2>
              <p class="animate-text">这里放内容简介，内容简介,这里放内容简介，内容简介,这里放内容简介，内容简介</p>
              <div class="dots"> <span></span> <span></span> <span></span> </div>
            </div>
          </div>
        </div>
        <pre><code class="language-css">
          * { margin: 0; padding: 0;}
          .lists{
              width: 100%;
              display: flex;
              justify-content: center;
              margin-top: 100px;
          }
          .item {
              width: 300px;
              height: 300px;
              background-color: #99aeff;
              position: relative;
              cursor: pointer;
              transition: all 0.4s ease-out;
              box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);
              overflow: hidden;
              color: #fff;
          }
          .item img {
              height: 100%;
              width: 100%;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 0;
              transition: all 0.4s ease-out;
          }
          .item .text {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              z-index: 99;
              position: absolute;
              padding: 30px;
          }
          .item h1 {
              text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
          }
          .item h2 {
              margin-top: 20px;
              font-style: italic;
              transform: translateX(200px);
          }
          .item p {
              margin-top: 20px;
              line-height: 25px;
              transform: translateX(-200px);
              transition-delay: 0.2s;
          }
          .animate-text {
              opacity: 0;
              transition: all 0.6s ease-in-out;
          }
          .item:hover {
              box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64);
              transform: scale(1.05);
          }
          .item:hover img {
              opacity: 0.2;
          }
          .item:hover .animate-text {
              transform: translateX(0);
              opacity: 1;
          }
          .dots {
              position: absolute;
              bottom: 20px;
              right: 30px;
              margin: 0 auto;
              width: 30px;
              height: 30px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-around;
          }
          .dots span {
              width: 5px;
              height: 5px;
              background-color: #fff;
              border-radius: 50%;
              display: block;
              opacity: 0;
              transition: transform 0.4s ease-out, opacity 0.5s ease;
              transform: translateY(30px);
          }
          .item:hover span {
              opacity: 1;
              transform: translateY(0px);
          }
          .dots span:nth-child(1) {
              transition-delay: 0.05s;
          }
          .dots span:nth-child(2) {
              transition-delay: 0.1s;
          }
          .dots span:nth-child(3) {
              transition-delay: 0.15s;
          }          
        </code></pre>
      </article>
    </div>

  </main>
  <script src="/src/js/highlight.pack.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</body>

</html>